/* 动画 */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

// 淡入淡出 【从左至右】
.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

// 滑动
@keyframes slideLeftRetourn {
  0% {
    transform-origin: 0 0;
    transform: translateX(-100%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}

.slideLeftRetourn {
  animation-name: slideLeftRetourn;
}

// 淡入
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}
